<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index" width="50" label="#" />
    <el-table-column prop="authName" label="权限名称" width="300" />
    <el-table-column prop="path" label="路径" width="300" />

    <el-table-column label="权限等级">
      <template #default="scope">
        <el-tag size="small" v-if="scope.row.level == 0">一级</el-tag>
        <el-tag type="success" size="small" v-if="scope.row.level == 1"
          >二级</el-tag
        >
        <el-tag type="warning" size="small" v-if="scope.row.level == 2"
          >三级</el-tag
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { RoleDescList } from "../../api/role";

// 接口渲染
const tableData: any = reactive([]);

onMounted(async () => {
  let res = await RoleDescList();
  console.log(res.data.data);
  tableData.push(...res.data.data);
  console.log(tableData);
});
</script>

<style scoped lang="scss"></style>
